<template>
  <el-dialog
    append-to-body
    id="login-dialog"
    title="登录信息"
    :center="true"
    :visible.sync="isVisible"
    width="900px">
    <div>
      <el-row style="height: 40px;line-height: 40px;" class="user-text-info">
        用户名: <span v-text="this.CurrUser.Username"></span>
        &nbsp;&nbsp;|&nbsp;&nbsp;
        查询时间段:
          <!--日期段-->
          <el-date-picker
            class="el-date-picker-daterange"
            type="daterange"
            value-format="yyyy-MM-dd"
            placeholder="选择日期段"
            v-model="form.createdAt">
          </el-date-picker>
        &nbsp;&nbsp;|&nbsp;&nbsp;
        状态:
          <!--日期段-->
          <el-select v-model="form.status" clearable>
            <el-option label="失败" :value="0">失败</el-option>
            <el-option label="成功" :value="1">成功</el-option>
          </el-select>
          <el-button type="danger" @click="getLogList">搜索</el-button>

        <!--                <el-col :span="8">姓名: <span v-text="CurrUser.Name"></span></el-col>-->
        <!--                <el-col :span="8">上次登录时间: <span v-text="CurrUser.LastLoginTime"></span></el-col>-->
      </el-row>
    </div>
    <el-table
      height="500"
      :default-sort="{createdAt:'descending'}"
      @sort-change="changeSort"
      :data="tableData"
      align="center"
      size="mini"
      style="width: 100%"
      element-loading-text="请求中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      v-loading="loading"
      stripe
      border>
      <el-table-column
        sortable
        prop="createdAt"
        label="操作时间"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        prop="ip"
        label="登录IP"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.status.name }}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-pagination
        style="width: 100%; margin-right: 10px; margin-top: 10px;"
        :total="total"
        :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
        :page-size="form.pageSize"
        :current-page="form.page"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      />
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'LoginInfo',
  mounted: function () {
    var $this = this
    this.bus.$on('LoginInfoBusCall', function () {
      $this.isVisible = true
      $this.$forceUpdate()
    })
  },
  watch: {
    isVisible: function () {
      this.getLogList()
    }
  },
  data: function () {
    return {
      loading: false,
      isVisible: false,
      tableData: [],
      total:0,
      form:{
        page:1,
        pageSize:10,
        status:'',
        sortProp:'id',
        sortOrder:'descending',
        createdAt:[]
      }
    }
  },
  methods: {
    changeSort:function (sortOrder) {
      this.form.page=1
      this.form.sortOrder=sortOrder
      this.getLogList()
    },
    // 分页改变
    pageChange: function (page) {
      this.form.page = page
      // 回调重新搜索
      this.getLogList()
    },
    // 每页条数改变
    pageSizeChange: function (pageSize) {
      this.form.pageSize = pageSize
      // 回调重新搜索
      this.getLogList()
    },
    getLogList: function () {
      var $this = this
      $this.loading = true
      var form=Object.assign({},$this.form)
      if (form.createdAt && typeof form.createdAt.join==='function'){
        form.createdAt=form.createdAt.join(',')
      }else{
        form.createdAt=''
      }
      if (form.status===''){
        delete form.status
      }
      form.sortOrder=form.sortOrder==='descending'?'DESC':'ASC'
      $this.tableData=[]
      $this.MyRequest($this.ApiDoNameAuth+'User/loginLog', form, function (data) {
        $this.loading = false
        $this.tableData = data.list
        $this.total = data.total
        $this.$forceUpdate()
      })
    }
  }
}
</script>
<style>
#login-dialog .el-header {
  line-height: normal;
}

.user-text-info {

}

.user-text-info>span {
  color: #248551;
  font-size: 12px;
}
</style>
